<template>
  <div class="login-base-page">
    <div class="d-flex justify-end fill-width login-radio-button">
      <el-radio-group v-model="state.active" size="small">
        <el-radio-button v-for="item in state.pageList" :label="item.label">{{item.name}}</el-radio-button>
      </el-radio-group>
    </div>
    <Page1 v-if="state.active=='1'" />
    <Page2 v-if="state.active=='2'" />
  </div>
</template>

<script setup lang="ts">
import Page1 from "~/views/login/Page1.vue";
import Page2 from "~/views/login/Page2.vue";
import { reactive } from "vue";

const state = reactive({
  pageList: [
    { name: "亮色", label: "1" },
    { name: "暗色", label: "2" },
  ],
  active: "1",
});
</script>

<style  lang="scss">
.el-popper.is-customized {
  color: white;

  &.AuthAccount {
    background: var(--el-color-primary);
  }

  &.AuthPhone {
    background: var(--el-color-warning);
  }

  &.AuthEmail {
    background: var(--el-color-success);
  }
}

.el-popper.is-customized .el-popper__arrow::before {
  background: transparent;
}
.login-base-page {


  .login-radio-button{
    position: absolute;
    padding: 16px;
  }
}
</style>
